<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<body v-cloak>

    <div v-html="html"></div>
    <div v-if="code==200">
        <ul v-for="i,index in ajaxData">
            <li>
                <div>{{i.shop_name}}</div>
                <div>价格{{i.price}}</div>
                <img :src="i.shop_img" width="100" alt="">
                <div>数量{{i.shop_num}}</div>
            </li>
    </div>
    </ul>
    </div>
    <div v-else>{{ajaxData}}</div>
</body>
<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script>
    //#### 作业：体验下vue个各个生命周期阶段,使用jquery去获取后端的接口数据，使用这些数据,渲染
    Vue.createApp({
        beforeCreate: function () {
            console.log('vue的实例还没创建完成')
        },
        created: function () {
            console.log('实例创建完成');
        },
        beforeMount: function () {
            console.log('还没去绑定元素')
        },
        mounted: function () {
            console.log('去绑定元素')
            this.html = '<h3>加载完成</h3>';

            //-----------------------------------------
            var ajaxData = this.ajaxData;
            var code = this.code;
            $.ajax({
                url: '/data',
                dataType: 'json',
                async: false,
                success: function (data) {
                    if (data.code == 200) {
                        ajaxData = data.data
                        code = data.code
                    } else {
                        code = data.code
                        ajaxData = data.msg;
                    }
                }

            })
            this.ajaxData=ajaxData;
            this.code=code;
            //------------------------------------------
        },
        beforeUnmount: function () {
            // 组件在卸载之前// 可以访问组件中的数据，函数，自定义的属性等// 可访组件视图的 DOM 元素beforeUnmount()
        },
        data: function () {
            return {
                html: '<h3>正在加载中</h3>',
                ajaxData: '未启动连接',
                code: 400,
            }
        },
    }).mount('body')
</script>

</html>